/**
 * Global authority directive 细颗粒度的权限控制
 * Used for fine-grained control of component permissions
 * @Example v-auth="RoleEnum.TEST"
 */
import type { App, Directive, DirectiveBinding } from 'vue';

import { usePermission } from '/@/hooks/web/usePermission';


// 逻辑就是对于不在权限内的dom节点、直接删除掉全部子节点
function isAuth(el: Element, binding: any) {
   const { hasPermission } = usePermission();

   const value = binding.value;
   if (!value) return;
   if (!hasPermission(value)) {
      el.parentNode?.removeChild(el);
   }
   
}

const mounted = (el: Element, binding: DirectiveBinding<any>) => {
   isAuth(el, binding);
};

const authDirective: Directive = {
   mounted,
};

export function setupPermissionDirective(app: App) {
   app.directive('auth', authDirective);
}

export default authDirective;
